import React from 'react';

export default () => {
  {
    // protected 演示
    class Person {
      protected name: string;
      constructor(name: string) {
        this.name = name;
      }
    }

    class Employee extends Person {
      private department: string;

      constructor(name: string, department: string) {
        super(name);
        this.department = department;
      }

      public getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`;
      }
    }

    let howard = new Employee('Howard', 'Sales');
    console.log(howard.getElevatorPitch());
// console.log(howard.name); // 错误

// 只读
    class Octopus {
      readonly name: string;
      readonly numberOfLegs: number = 8;
      constructor(theName: string) {
        this.name = theName;
      }
    }
    let dad = new Octopus('Man with the 8 strong legs');
// dad.name = "Man with the 3-piece suit"; // 错误! name 是只读的.

// 存取器
    let passcode = 'secret passcode';

    class Employee2 {
      private _fullName: string = 'default';

      get fullName(): string {
        return this._fullName;
      }

      set fullName(newName: string) {
        if (passcode && passcode == 'secret passcode') {
          this._fullName = newName;
        } else {
          console.log('Error: Unauthorized update of employee!');
        }
      }
    }

    let employee = new Employee2();
    employee.fullName = 'Bob Smith';
  }
  return (
    <div>
      <h1>类</h1>
      <p>1. 成员都默认为 public</p>
      <p>2. 当成员被标记成 private 时，它就不能在声明它的类的外部访问</p>
      <p>3. protected 成员在派生类中仍然可以访问</p>
      <p>
        4. 构造函数也可以被标记成 protected。
        这意味着这个类不能在包含它的类外被实例化，但是能被继承
      </p>
      <p>
        5. 可以使用 readonly关键字将属性设置为只读的。
        只读属性必须在声明时或构造函数里被初始化
      </p>
    </div>
  );
};
